<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue组件案例</title>
    <!-- vue组件:扩展了HTML元素(提高了组件代码的复用性),
		    使用步骤:1,定义组件 2,使用组件 
			1,定义组件分为:全局组件和局部组件
			2,两种组件的区别??
 				全局组件:可以在所有的数据渲染区使用,而且是先定义再new Vue()
				局部组件:是在Vue对象里使用components来定义的,只能在当前对象的数据渲染区来使用
		-->
    <script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 2,使用全局组件(本质上就是一个HTML元素) -->
        <car></car>
        <!-- 4,使用局部组件(本质上就是一个HTML元素) -->
        <person></person>
    </div>

    <div id="d">
        id=d位置,使用的全局组件:<car></car> ,使用成功! <br>
        id=d位置,使用的局部组件:<person></person> ,使用失败!
    </div>
    <script>
        //1,创建全局组件
        //给vue添加组件(组件名称,组件的模板)
        Vue.component('car', {
            // 通过template,描述car组件的功能
            template: '<h3>hello Component</h3>'
        })
        //创建Vue对象,拥有了car组件
        new Vue({
            el: "#app",
            components: { //3,创建局部组件
                // 组件名称,组件模板
                'person': {
                    template: '<h1>局部组件</h1>'
                }
            }
        })
        new Vue({
            el: "#d"
        })
    </script>
</body>

</html>